<template>
  <div>
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>修改手机</span>
      <div class="right">
      </div>
    </div> -->
    <div class="title">
      <span>请输入新手机号码</span>
    </div>
			<div class="box">
				<div class="info">
					<span>国家/地区：中国大陆+86</span>
				</div>
			</div>
			<div class="box">
				<div class="info">
					<span>手机号</span><input type="text" v-model="phone" placeholder="请输入手机号">
				</div>
			</div>
			<div class="boxs">
				<input type="text" v-model="num" placeholder="验证码">
				 <yd-sendcode slot="right" 
											v-model="start1" 
											@click.native="sendCode1" 
											type="warning"
				></yd-sendcode>
			</div>
			<div class="btn">
        <button class="next" @click="names()">下一步</button>
      </div>
		</div>
</template>

<script>
import Vue from 'vue';
import {CellGroup, CellItem} from 'vue-ydui/dist/lib.rem/cell';
Vue.component(CellGroup.name, CellGroup);
Vue.component(CellItem.name, CellItem);
export default {
  name: 'set_phone',
  data () {
    return {
     index:0,
		 isshow:false,
		 start1: false,
		 phone:'',
		 num:''
    }
  },
  methods:{
    back: function() {
      this.$router.go(-1);
		},
		sendCode1() {
				if(!this.phone){
					this.$dialog.toast({mes:"请输入正确手机号"});
					return
				} 
				this.$dialog.loading.open('发送中...');
				
					let self = this;
					let url = "/api/login/send";
					self.httpPost(url,{phone:this.phone,type:5},function(res) {
								if (res.code == 200) { 
									self.start1 = true; 
									self.$dialog.loading.close(); 
								}else{
									self.$message.error({msg:res.msg}); 
									self.$dialog.loading.close();  
								}
					})
		},
		//下一步
		names(){
			let self = this;
			let url = "/api/login/updatephone";
			if(!this.phone){
				this.$dialog.toast({mes:"请输入正确手机号"});
				return
			}  
			if(!this.num){
				this.$dialog.toast({mes:"请输入验证码"});
				return
			}
			self.httpPost(url,{user_id:this.myid,token:this.token,phone:"",newphone:this.phone,code:this.num,type:5},function(res) {
				if (res.code == 200) { 
					self.$dialog.toast({mes:res.msg});
					setTimeout(() => {
						self.$router.push("/mine"); 
					}, 1000);
				}else{
					self.$message.error(res.msg); 
        }
      })
		},
	},
	created(){
    document.title = "输入新手机号码";
    this.token = localStorage.getItem('mytoken');
	this.myid = localStorage.getItem('myid');
  },
}
</script>


<style scoped>
.boxs input{
	padding-left: .2rem;
}
.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
  margin-bottom: .03rem;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
}
.top_tab .right{
	width: 1rem;
	display: flex;
	justify-content: space-between;
}
.top_tab  img{
  width:.43rem;
}
.title{
	width:100%;
	height:.88rem;
	padding: .3rem .3rem;
	display: flex;
	align-items: center;
}
.title span{
	font-size: .28rem;
	color:#333;
}
.box{
	width:100%;
	height:1rem;
	background: #FFF;
	display: flex;
	padding: 0 .3rem;
	align-items: center;
}
.box .info{
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
}
.box .info span{
	font-size: .28rem;
	color:#333;
	vertical-align: middle;
}
.btn{
	width:100%;
	display: flex;
	justify-content: center;
	margin-top: .4rem;
}
.btn .next{
	width: 90%;
	height:.90rem;
	background: #e63f3f;
	border: none;
	border-radius: 10px;
	font-size: .32rem;
	color:#FFF;
}
.box span{
	font-size: .28rem;
	color:#333;
	vertical-align: middle;
}
.box input{
	border:none;
	margin-left: .2rem;
}
.boxs{
	width:100%;
	height:1rem;
	background: #FFF;
	display: flex;
	padding: .1rem .3rem;
	align-items: center;
	justify-content: space-between;
}
.boxs .info{
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
}
.boxs input{
	border:none;
	width:60%;
	border-radius: 5px;
	background: #f2f2f2;
	height:100%;
}
.boxs button{
	border:none;
	height:100%;
	border-radius: 5px;
	color:#FFF;
	font-size: .32rem;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
color: #999; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
color: #999; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
color: #999; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
color: #999; 
} 

.boxs input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
	font-size: .32rem;
	color: #333; 
	padding-left: .2rem;
} 
.boxs input:-moz-placeholder, textarea:-moz-placeholder { 
	font-size: .32rem;
	color: #333; 
	padding-left: .2rem;
} 
.boxs input::-moz-placeholder, textarea::-moz-placeholder { 
	font-size: .32rem;
	color: #333;
	padding-left: .2rem;  
} 
.boxs input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
	font-size: .32rem;
	color: #333; 
	padding-left: .2rem;
}
</style>

<style>
.yd-cell:after {
	height:0!important;
}
</style>

